// index.js
const util = require("../../util/util");
Page({
  data: {
    // 时钟页面是否显示
    clockShow: false,
    time: 5,
    clockTime: "05:00",
    // 分类
    cateArr: [{
        icon: "work",
        text: "工作"
      },
      {
        icon: "study",
        text: "学习"
      },
      {
        icon: "think",
        text: "思考"
      },
      {
        icon: "write",
        text: "写作"
      },
      {
        icon: "sport",
        text: "运动"
      },
      {
        icon: "read",
        text: "阅读"
      }
    ],
    // 选中的任务分类
    cateActive: 0,
    // 当前页面高度
    pageHeight: 0,
    // 时钟定时器
    clockTimer: null,
    // 时钟页面定时器剩余时间
    leftTime: 60000,
    // 定时器状态[暂停,继续]
    timerStatus: "暂停",
    // 白圈角度[初始为1.5]
    clockAngle: 1.5,
    // 时钟页面,放弃按钮
    giveUpBtn: false
  },
  // 页面加载
  onLoad: function () {
    const system = wx.getSystemInfoSync();
    this.setData({
      pageHeight: 750 / system.windowWidth * system.windowHeight
    });
  },
  // 滑动选择器改变时
  sliderChange: function (e) {
    this.setData({
      // 更改时间
      time: e.detail.value
    })
  },
  // 选中分类
  selectCate: function (e) {
    this.setData({
      cateActive: e.currentTarget.dataset.index
    })
  },
  // 开始计时
  startClock: function () {
    let totalTime = this.data.time * 60 * 1000;
    this.setData({
      clockShow: true,
      clockTime: this.data.time < 10 ? `0${this.data.time}:00` : this.data.time + ":00",
      leftTime: totalTime
    });
    // 画黑色圆圈
    this.drawCircle();
    // 画白圈
    this.drawWhite();
  },
  // 暂停计时
  pauseClock: function () {
    switch (this.data.timerStatus) {
      case "暂停":
        // 清除定时器
        clearInterval(this.data.clockTimer);
        this.setData({
          timerStatus: "继续",
          giveUpBtn: true
        });
        break;
      case "继续":
        this.drawWhite();
        this.setData({
          timerStatus: "暂停",
          giveUpBtn: false
        });
        break;
      case "完成":
        // 点击完成退出时钟页面
        this.giveUpClock();
        break;
    }
  },
  // 放弃计时
  giveUpClock: function () {
    this.setData({
      time: 5,
      timerStatus: "暂停",
      // 关闭时钟页面
      clockShow: false,
      giveUpBtn: false
    });
  },
  // 画圆圈(canvas)
  drawCircle: function (select = "#circle-black", bgColor = "#000", start = 0, end = 2) {
    const query = wx.createSelectorQuery();
    query.select(select)
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        const canvas = res[0].node;
        const ctx = canvas.getContext("2d");
        // 宽高比
        const dpr = wx.getSystemInfoSync().pixelRatio;
        // 重新设置 canvas 的宽高，否则圆圈变形
        canvas.width = res[0].width * dpr;
        canvas.height = res[0].height * dpr;
        // 线宽
        const lineWid = 12 / dpr;
        // 画笔颜色（默认颜色: black）
        ctx.strokeStyle = bgColor;
        ctx.lineWidth = lineWid;
        ctx.beginPath();
        // 画圆,圆点x-圆点y-半径-起始角度-结束角度
        ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2 - lineWid, start * Math.PI, end * Math.PI);
        ctx.stroke();
      })
  },
  // 动态倒计时(白圈)
  drawWhite: function () {
    let totalTime = this.data.time * 60 * 1000;

    // 先清除之前的定时器
    clearInterval(this.data.clockTimer);
    const countDownTimer = setInterval(() => {
      if (this.data.clockAngle >= 3.5) {
        console.log("剩余时间:", this.data.leftTime);
        console.log("角度", this.data.clockAngle);
        clearInterval(countDownTimer);
        this.setData({
          clockTime: "00:00",
          timerStatus: "完成",
          // 初始化角度
          clockAngle: 1.5
        });
        // 添加日志(统计专注时长)
        let logs = wx.getStorageSync('logs')
        logs.unshift({
          date: util.formatDate(new Date()),
          cate: this.data.cateArr[this.data.cateActive].text,
          time: this.data.time + "分钟"
        });
        wx.setStorageSync('logs', logs);
      } else {
        this.data.clockAngle = 1.5 + 2 * (totalTime - this.data.leftTime) / totalTime;
        this.drawCircle("#circle-white", "#fff", 1.5, this.data.clockAngle);
        // 倒计时中间文字变化
        if (this.data.leftTime % 1000 === 0) {
          // 变化时刻
          let sec = this.data.leftTime / 1000;
          let cMin = parseInt(sec / 60);
          let cSec = sec - cMin * 60;
          cMin = cMin < 10 ? "0" + cMin : cMin;
          cSec = cSec < 10 ? "0" + cSec : cSec;
          this.setData({
            clockTime: cMin + ":" + cSec
          })
        }
      }

      // 过去 100 毫秒,计时器减去100
      this.data.leftTime -= 100;
    }, 100);
    this.setData({
      clockTimer: countDownTimer
    });
  }
})